<template>
  <div class="center">
    <!-- 查询 -->
    <div class="search clearfix">
      <Search @childFn="parentFn" />
      <el-button type="primary" @click="sub">查询</el-button>
    </div>
   
    <!-- 第一行 -->
    <div class="cake_chart clearfix">
      <div class="first_box">
        <dv-border-box-11 :color="['#11caff']" backgroundColor="transparent" title="站点区域统计zhangyi">
        <div id="indexarea" class="first_cake"></div>
        </dv-border-box-11>
      </div>
      <div class="second_box">
        <dv-border-box-11 :color="['#11caff']" backgroundColor="transparent" title="站点地图">
        <div id="indexstatus" class="second_cake"></div>
        </dv-border-box-11>
      </div>
      <div class="third_box">
         <dv-border-box-11 :color="['#11caff']" backgroundColor="transparent" title="站点地图">
        <div id="indexinline" class="third_cake"></div>
        </dv-border-box-11>
      </div>
    </div>
   
    <!-- 第二行  -->
    <!-- 中国地图 和报表-->
    <div class="main clearfix">
       <!-- 中国地图 -->
      <div class="map-container">
          <dv-border-box-11 :color="['#11caff']" backgroundColor="transparent"     title="站点地图">
              <!-- 中国和省和市级 -->
              <div class="title">
                <span
                  @click="backChina"
                  v-bind:class="{ active: currentLevel == 2 || currentLevel == 3 }"
                  >中国</span
                >
                <span
                  v-if="currentLevel == 2 || currentLevel == 3"
                  @click="backProvince"
                  v-bind:class="{ active: currentLevel == 3 }"
                  >>>{{ provinceObj.name }}
                </span>
                <span v-if="currentLevel == 3">>>{{ cityObj.name }}</span>
              </div>

              <!-- 中国地图 -->
              <div id="charts" style="width: 100%; height: 100%"></div>
              <!-- <div id="charts" style="width: 100%; height: 80vh"></div> -->

               <!-- 告警的 -->
              <div class="bar" v-show="barShow"> 

                <div class="bar-title">
                  <p>{{sitename}} </p>
                  <p> 总告警:{{allwarn}} </p> 
                  <p> 今日告警:{{todaywarn}}</p>
                  <img src="@/assets/img/close.png" @click="closeBar" />
                </div> 

                
                <div class="bar-chart"></div> 
              </div>
          </dv-border-box-11>
      </div>

       <!--table包含了 <div class="asile-echart" v-show="loading"> -->
      <div class="table">
         <dv-border-box-11 :color="['#11caff']" backgroundColor="transparent" title="站点报错日志">
        <div>
         <!-- height="46.5vh" -->
        <el-table
          :data="tableData"
          height="50vh"
          class="customer-table"
          :header-cell-style="headClass"
        >
         <template slot="empty">
            <div></div>
            </template>
          <el-table-column label="站点名称" width="200">
            <template slot-scope="scope">
              <span :class="{ animation: scope.row.count>0 }">{{
                scope.row.siteName
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="告警等级">
            <template slot-scope="scope">
              <span :class="{ animation: scope.row.count>0 }">{{
                scope.row.level
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="告警数量">
            <template slot-scope="scope">
              <span :class="{ animation: scope.row.count>0 }">{{
                scope.row.count
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="告警原因">
            <template slot-scope="scope">
              <span :class="{ animation: scope.row.count>0 }">{{
                scope.row.category
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <img
                src="../../assets/img/icon1.png"
                @click="ordersub(scope.row)"
                alt="工单"
                title="工单"
              />
              <img
                src="../../assets/img/icon2.png"
                @click="warnsub(scope.row)"
                alt="警报"
                title="警报"
              />
              <img
                src="../../assets/img/icon3.png"
                @click="chartsub(scope.row)"
                alt="热力图"
                title="热力图"
              />
            </template>
          </el-table-column>
        </el-table>
        </div>
        <div class="asile-echart" v-show="loading">
          <dv-loading></dv-loading>
        </div>
        </dv-border-box-11>
      </div>
    </div>

    </div>
  </div>
</template>

<script>
import Search from "../../common/select";
import elementResizeDetectorMaker from "element-resize-detector";
export default {
  name: "home",
  components: {
    Search,
  },
  data() {
    return {
      province: [], //省集合
      city: [], //市集合
      area: [], //区集合
      message: {},
      sitename: "五台山站", //站点名称
      todaywarn: "", //今日告警
      allwarn: "", //总告警
      position: {}, //标记点定位
      show: false,
      chartData: [],
      tableData: [],
      points: [], //地图标记点集合
      $chart1: "",
      $chart2: "",
      $chart3: "",
      $chart4: "",
      $chart5: "",
      timelist: [],
      onelist: [],
      twolist: [],
      threelist: [],
      loading: false,
      map: "",
      currentLevel: 1,
      markPointData: [],
      chinaJson: Object,
      provinceJson: Object,
      provinceObj: Object,
      cityObj: Object,
      pointData: Object,
      barShow: false,
      option1: {
        backgroundColor: "transparent",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          top: "10%",
          right: "3%",
          left: "15%",
          bottom: "20%",
        },
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 100,
          },
        ],
        xAxis: {
          type: "category",
          triggerEvent: true,
          axisLine: {
            lineStyle: {
              color: "#133579",
            },
          },
          axisLabel: {
            interval: "auto",
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 12,
            },
          },
        },
        yAxis: {
          axisLabel: {
            formatter: "{value}",
            color: "#e2e9ff",
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(255,255,255,1)",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(22, 43, 95, 1)",
            },
          },
          axisTick: {
            //y轴刻度线
            show: false,
          },
        },
        dataset: {
          dimensions: [],
          source: [],
        },
        series: [
          {
            type: "bar",
            barWidth: "10px",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(0,244,255,1)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(0,77,167,1)", // 100% 处的颜色
                    },
                  ],
                  false
                ),
                barBorderRadius: [30, 30, 30, 30],
                shadowColor: "rgba(0,160,221,1)",
                shadowBlur: 4,
              },
            },
            label: {
              show: true,
              lineHeight: 20,
              width: 25,
              height: 20,
              position: ["0", "-20"],
              color: "rgba(0,244,255,1)",
              distance: 1,
              // formatter: "{@total}",
              rich: {
                total: {
                  align: "center",
                },
              },
            },
          },
          {
            type: "bar",
            barGap: "-100%",
            barWidth: "10px",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(255,252,0,1)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(8,228,222,0.2)", // 100% 处的颜色
                    },
                  ],
                  false
                ),
                barBorderRadius: [30, 30, 30, 30],
                shadowColor: "rgba(0,160,221,1)",
                shadowBlur: 4,
              },
            },
            label: {
              show: false,
              lineHeight: 20,
              width: 25,
              height: 20,
              position: ["0", "-10"],
              color: "rgba(255,252,0,1)",
              distance: 1,
              formatter: "{@inline}",
              rich: {
                inline: {
                  align: "center",
                },
              },
            },
          },
        ],
      },
      option2: {
        backgroundColor: "transparent",
        tooltip: {
          show: false,
        },
        legend: {
          show: false,
        },
        toolbox: {
          show: false,
        },
        series: [
          {
            name: "",
            type: "pie",
            clockWise: false,
            radius: [80, 85],
            hoverAnimation: false,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "outside",
                  color: "#ddd",
                  formatter: function (params) {
                    if (params.name !== "") {
                      return params.name + params.value;
                    } else {
                      return "";
                    }
                  },
                },
                labelLine: {
                  show: false,
                },
              },
            },
            data: [],
          },
        ],
      },
      option3: {
        backgroundColor: "transparent",
        series: [
          {
            type: "gauge",
            name: "外层辅助",
            radius: "86%",
            pointer: {
              show: false,
            },
            detail: {
              show: true,
              offsetCenter: [200, "-90%"],
              fontSize: 15,
              color: "rgba(14, 206, 205, 1)",
            },
            data: [
              {
                value: "",
                name: "在线：",
              },
            ],
            title: {
              show: true,
              offsetCenter: [160, "-90%"],
              textStyle: {
                color: "rgba(14, 206, 205, 1)",
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: [[1, "#0a80d5"]],
                width: 5,
                opacity: 1,
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              length: 20,
              lineStyle: {
                color: "#051932",
                width: 0,
                type: "solid",
              },
            },
            axisLabel: {
              show: false,
            },
          },
          {
            name: "最内层线",
            type: "gauge",
            radius: "30%",
            center: ["50%", "50%"],
            startAngle: 0,
            endAngle: 359,
            axisLine: {
              show: false,
              lineStyle: {
                opacity: 0,
              },
            },
            splitLine: {
              show: false,
              lineStyle: {
                opacity: 0,
              },
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              length: 2,
              lineStyle: {
                color: "#0089fa",
                width: 2,
                type: "solid",
              },
            },
            detail: {
              show: true,
              offsetCenter: [200, "-200%"],
              fontSize: 15,
              color: "rgba(252, 168, 10, 1)",
            },
            data: [
              {
                value: "",
                name: "离线：",
              },
            ],
            title: {
              show: true,
              offsetCenter: [160, "-200%"],
              textStyle: {
                color: "rgba(252, 168, 10, 1)",
              },
            },
            pointer: {
              show: false,
            },
          },
          {
            name: "内层数据刻度",
            type: "gauge",
            radius: "79%",
            min: 0,
            max: 100,
            center: ["50%", "50%"],
            axisLine: {
              lineStyle: {
                width: 10,
                color: [
                  [0.1, "#e00005"],
                  [
                    0.3,
                    new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                      {
                        offset: 0,
                        color: "#e00005",
                      },
                      {
                        offset: 0.8,
                        color: "#e6a900",
                      },
                    ]),
                  ],
                  [0.7, "#e6a900"],
                  [
                    0.9,
                    new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                      {
                        offset: 0,
                        color: "#00c05a",
                      },
                      {
                        offset: 0.6,
                        color: "#e6a900",
                      },
                    ]),
                  ],
                  [1, "#00c05a"],
                ],
              },
            },
            splitLine: {
              length: 10,
              lineStyle: {
                width: 2,
                color: "#ffffff",
              },
            },
            axisTick: {
              lineStyle: {
                width: 1,
                color: "#ffffff",
              },
            },
            axisLabel: {
              color: "#0089fa",
              distance: 5,
              fontSize: 13,
            },
            detail: {
              show: true,
              offsetCenter: ["0", "70%"],
              color: "#fff",
              formatter: function (value) {
                return value.toFixed(1) + "%";
              },
              fontSize: 19,
            },
            itemStyle: {
              normal: {
                color: "rgb(0,191,255)",
              },
            },
            data: [
              {
                value: "",
                name: "在线率",
              },
            ],
            silent: false,
            title: {
              offsetCenter: [0, "95%"], //设置在线率位置
              color: "#0089fa",
            },
          },
        ],
      },
      option5: {
        backgroundColor: "transparent",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "2%",
          right: "2%",
          bottom: "2%",
          top: "15%",
          containLabel: true,
        },
        legend: {
          data: ["一级", "二级", "三级"],
          right: 10,
          top: 12,
          textStyle: {
            color: "#fff",
          },
          itemWidth: 12,
          itemHeight: 10,
          // itemGap: 35
        },
        xAxis: {
          type: "category",
          data: [],
          axisLine: {
            lineStyle: {
              color: "#133579",
            },
          },
          axisLabel: {
            textStyle: {
              fontFamily: "Microsoft YaHei",
              color: "#fff",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
            lineStyle: {
              color: "white",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#11366e",
              type: "solid",
            },
          },
          axisTick: {
            //y轴刻度线
            show: false,
          },
        },
        series: [
          {
            name: "一级",
            type: "bar",
            barWidth: "5%",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 1,
                    color: "rgba(52, 134, 218, 1)",
                  },
                  {
                    offset: 0,
                    color: "rgba(14, 205, 205, 1)",
                  },
                ]),
                barBorderRadius: 5,
              },
            },
            data: [],
          },
          {
            name: "二级",
            type: "bar",
            barWidth: "5%",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 1,
                    color: "rgba(52, 134, 218, 1)",
                  },
                  {
                    offset: 0,
                    color: "rgba(3, 255, 68, 1)",
                  },
                ]),
                barBorderRadius: 5,
              },
            },
            data: [],
          },
          {
            name: "三级",
            type: "bar",
            barWidth: "5%",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 1,
                    color: "rgba(52, 134, 218, 1)",
                  },
                  {
                    offset: 0,
                    color: "rgba(252, 105, 36, 1)",
                  },
                ]),
                barBorderRadius: 5,
              },
            },
            data: [],
          },
        ],
      },
    };
  },
  methods: {
    //接收子组件传的省市区对象
    parentFn(payload) {
      this.message = payload;
    },
    headClass() {
      return "background-color: transparent;color:#fff;font-weight:bold;";
    },
    //查询
    sub() {
      let params = {
        provinceCode: this.message.provincecode || "",
        cityCode: this.message.citycode || "",
        districtCode: this.message.districtcode || "",
      };
      this.$http
        .post("/home/count", params)
        .then((res) => {
          if (res.data.h.code == 0) {
            let areacount = [];

// zyarea_[{"code":"440106","name":"天河区","count":"19"},{"code":"440111","name":"白云区","count":"17"},{"code":"440103","name":"荔湾区","count":"7"},{"code":"440105","name":"海珠区","count":"7"},{"code":"440114","name":"花都区","count":"3"},{"code":"440113","name":"番禺区","count":"2"},{"code":"440104","name":"越秀区","count":"0"},{"code":"440118","name":"增城区","count":"0"},{"code":"440115","name":"南沙区","count":"0"},{"code":"440117","name":"从化区","count":"0"},{"code":"440112","name":"黄埔区","count":"0"}]
//  zyareaOnline_[{"code":"440111","name":"白云区","count":"12"},{"code":"440106","name":"天河区","count":"11"},{"code":"440103","name":"荔湾区","count":"3"},{"code":"440114","name":"花都区","count":"2"},{"code":"440105","name":"海珠区","count":"2"}]
//  zyareacount_[{"product":"天河区","总数":"19","在线":"11"},{"product":"白云区","总数":"17","在线":"12"},{"product":"荔湾区","总数":"7","在线":"3"},{"product":"海珠区","总数":"7","在线":"2"},{"product":"花都区","总数":"3","在线":"2"},{"product":"番禺区","总数":"2"}]
//  zydata_[{"value":56,"name":"运营","itemStyle":{"normal":{"borderWidth":5,"shadowBlur":30,"borderColor":{"x":0,"y":0,"x2":1,"y2":1,"type":"linear","global":false,"colorStops":[{"offset":0,"color":"#7777eb"},{"offset":1,"color":"#70ffac"}]},"shadowColor":"rgba(142, 152, 241, 0.6)"}}},{"value":14,"name":"","itemStyle":{"normal":{"label":{"show":false},"labelLine":{"show":false},"color":"rgba(0, 0, 0, 0)","borderColor":"rgba(0, 0, 0, 0)","borderWidth":0}}}]
            //console.log("zyarea_"+JSON.stringify(res.data.b.area));

            res.data.b.area.map((item) => {
              if (item.count > 0) {
                let obj = {};
                obj.product = item.name;
                obj.总数 = item.count;
                areacount.push(obj);
              }
            });
          
            //console.log("zyareaOnline_"+JSON.stringify(res.data.b.areaOnline));
            res.data.b.areaOnline.map((item) => {
              areacount.map((data) => {
                if (item.name == data.product) {
                  data.在线 = item.count;
                }
              });
            });
            
            //console.log("zyareacount_"+JSON.stringify(areacount));
            //站点区域统计
            this.$chart1.setOption({
              dataset: {
                dimensions: ["product", "总数", "在线"],
                source: areacount,
              },
            });
            //环形数据处理
            this.chartData = [];
            if (res.data.b.runCount > 0) {
              let obj = {};
              obj.value = res.data.b.runCount;
              obj.name = "运营";
              this.chartData.push(obj);
            }
            if (res.data.b.stopCount > 0) {
              let obj = {};
              obj.value = res.data.b.stopCount;
              obj.name = "停运";
              this.chartData.push(obj);
            }
            if (res.data.b.otherCount > 0) {
              let obj = {};
              obj.value = res.data.b.otherCount;
              obj.name = "其他";
              this.chartData.push(obj);
            }
            var placeHolderStyle = {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                color: "rgba(0, 0, 0, 0)",
                borderColor: "rgba(0, 0, 0, 0)",
                borderWidth: 0,
              },
            };
            var data = [];
            var total = 0;
            for (var i = 0; i < this.chartData.length; i++) {
              total += this.chartData[i].value;
            }
            for (var i = 0; i < this.chartData.length; i++) {
              data.push(
                {
                  value: this.chartData[i].value,
                  name: this.chartData[i].name,
                  itemStyle: {
                    normal: {
                      borderWidth: 5,
                      shadowBlur: 30,
                      borderColor: new this.$echarts.graphic.LinearGradient(
                        0,
                        0,
                        1,
                        1,
                        [
                          {
                            offset: 0,
                            color: "#7777eb",
                          },
                          {
                            offset: 1,
                            color: "#70ffac",
                          },
                        ]
                      ),
                      shadowColor: "rgba(142, 152, 241, 0.6)",
                    },
                  },
                },
                {
                  value: total / 4,
                  name: "",
                  itemStyle: placeHolderStyle,
                }
              );
            }


            //环形图
            //console.log("zydata_"+JSON.stringify(data));
            this.$chart2.setOption({
              series: [
                {
                  data: data,
                },
              ],
            });
            // //在线率的表格
            this.$chart3.setOption({
              series: [
                {
                  data: [
                    {
                      value: res.data.b.onlineCount,
                      name: "在线：",
                    },
                  ],
                },
                {
                  data: [
                    {
                      value: res.data.b.OfflineCount,
                      name: "离线：",
                    },
                  ],
                },
                {
                  data: [
                    {
                      value: ` ${
                        (res.data.b.onlineCount /
                          (res.data.b.onlineCount + res.data.b.OfflineCount)) *
                        100
                      }`,
                      name: "在线率",
                    },
                  ],
                },
              ],
            });
        
        }
        })
        .catch((err) => {});
    },
    //站点报错日志
    getwarn() {
      this.loading = true;
      this.$http
        .get("/home/devicesAlarm/list")
        .then((res) => {
          if (res.data.h.code == 0) {

            //一条数据
            //zyres.data.b_[{"siteNo":"000211","level":"","count":"0","siteName":"广州机场北S站","category":""}]
             //console.log("zyres.data.b_"+JSON.stringify( res.data.b));
            let list = res.data.b.map((item) => {
              let arr = [];
              item.level.split(",").map((i) => {
                if (i == "one") {
                  i = "一级";
                  arr.push(i);
                }
                if (i == "two") {
                  i = "二级";
                  arr.push(i);
                }
                if (i == "three") {
                  i = "三级";
                  arr.push(i);
                }
              });
              item.level = arr.toString();
              return item;
            });
            //zylist_[{"siteNo":"000211","level":"","count":"0","siteName":"广州机场北S站","category":""}]
            //console.log("zylist_"+JSON.stringify(list));
            this.tableData = list;
            this.arrsort();
          }
          this.loading = false;
        })
        .catch((err) => {});
    },
    cityhandleChange() {},
    //初始化饼图容器
    initbox() {
      this.$chart1 = this.$echarts.init(document.getElementById("indexarea"));
      this.$chart2 = this.$echarts.init(document.getElementById("indexstatus"));
      this.$chart3 = this.$echarts.init(document.getElementById("indexinline"));
    },
    //饼图渲染
    initcake() {
      this.$chart1.setOption(this.option1);
      this.$chart2.setOption(this.option2);
      this.$chart3.setOption(this.option3);
    },
    //折线图渲染
    initbar(data) {
      this.$http
        .get(`/home/devicesAlarm/count/${data.code}`)
        .then((res) => {
          if (res.data.h.code == 0) {
            this.sitename = res.data.b.siteName;
            this.allwarn = res.data.b.totalAlarm;
            this.todaywarn = res.data.b.totalAlarmToday;
            this.timelist = [];
            let alldata = [];
            this.onelist = [];
            this.twolist = [];
            this.threelist = [];
            res.data.b.data.map((item) => {
              for (let i in item) {
                this.timelist.push(i);
                alldata.push(item[i]);
              }
            });
            alldata.map((item) => {
              for (let i in item) {
                if (i == "one") {
                  this.onelist.push(item[i]);
                }
                if (i == "two") {
                  this.twolist.push(item[i]);
                }
                if (i == "three") {
                  this.threelist.push(item[i]);
                }
              }
            });
            this.initInfo();
          }
        })
        .catch((err) => {});
    },
    arrsort() {
      let temp;
      for (let i = 0; i < this.tableData.length - 1; i++) {
        for (let j = 0; j < this.tableData.length - 1 - i; j++) {
          if (this.tableData[j].count < this.tableData[j + 1].count) {
            temp = this.tableData[j + 1];
            this.tableData[j + 1] = this.tableData[j];
            this.tableData[j] = temp;
          }
        }
      }
    },
    getarea() {
      let params = {
        superCode: this.superCode || "",
      };
      this.$http
        .post("/area/getChild", params)
        .then((res) => {
          if (res.data.h.code == 0) {
            this.province = res.data.b;
          }
        })
        .catch((err) => {});
    },
    handleChange() {
      this.city = [];
      this.value2 = "";
      this.area = [];
      this.value3 = "";
      let params = {
        superCode: this.value1 || "",
      };
      this.$http
        .post("/area/getChild", params)
        .then((res) => {
          if (res.data.h.code == 0) {
            this.city = res.data.b;
          }
        })
        .catch((err) => {});
    },
    handleChange1() {
      this.area = [];
      this.value3 = "";
      let params = {
        superCode: this.value2 || "",
      };
      this.$http
        .post("/area/getChild", params)
        .then((res) => {
          if (res.data.h.code == 0) {
            this.area = res.data.b;
          }
        })
        .catch((err) => {});
    },
    warnsub(item) {
      if (this.$route.path == "/warning") {
        return;
      }
      this.$router.push({
        path: "/warning",
        query: {
          siteNo: item.siteNo,
          siteName: item.siteName,
        },
      });
    },
    ordersub(item) {
      if (this.$route.path == "/workorder") {
        return;
      }
      this.$router.push({
        path: "/workorder",
        query: {
          siteName: item.siteName,
        },
      });
    },
    chartsub(item) {
      if (this.$route.path == "/standside3d") {
        return;
      }
      sessionStorage.setItem("3dSiteNo", item.siteNo);
      this.$router.push({
        path: "/standside3d",
        query: {
          siteNo: item.siteNo,
        },
      });
    },
    getQueryVariable(variable) {
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
          return pair[1];
        }
      }
      return false;
    },
    bindChat() {
      let code = this.getQueryVariable("code");
      if (code) {
        //发送请求，将code上传至后端消费，绑定user_code到用户账号
        this.$http.get("/weChat/bind/" + code).then((res) => {
          if (res.data.h.code == 0) {
            this.$message.success("企业微信号绑定成功");
            this.removeUrlParam();
          }
        });
      }
    },
    removeUrlParam() {
      var url = window.location.href; //获取当前页面的url
      if (url.indexOf("?") != -1) {
        //判断是否存在参数
        url = url.replace(/(\?|#)[^'"]*/, ""); //去除参数
        //window.history.pushState 不刷新页面，但是改变页面的url地址
        //https://blog.csdn.net/my_yang/article/details/7412588
        //在访问现在很火的google plus时，细心的用户也许会发现页面之间的点击是通过ajax异步请求的，同时页面的URL发生了了改变。
       // 并且能够很好的支持浏览器的前进和后退。不禁让人想问，是什么有这么强大的功能呢？
        // HTML5里引用了新的API，就是history.pushState和history.replaceState，就是通过这个接口做到无刷新改变页面URL的。
        // 与传统的AJAX的区别
        // 传统的ajax有如下的问题：
        // 虽然ajax可以无刷新改变页面内容，但无法改变页面URL
        // 其次为了更好的可访问性，内容发生改变后，改变URL的hash。但是hash的方式不能很好的处理浏览器的前进、后退等问题
        // 有的浏览器引入了onhashchange的接口，不支持的浏览器只能定时去判断hash是否改变
        // 再有，ajax的使用对搜索引擎很不友好，往往蜘蛛爬到的区域是空的
        // 为了解决传统ajax带来的问题，HTML5里引入了新的API，即：history.pushState, history.replaceState
        // 可以通过pushState和replaceState接口操作浏览器历史，并且改变当前页面的URL。
        // pushState是将指定的URL添加到浏览器历史里，replaceState是将指定的URL替换当前的URL。

        //如何调用
        // var state = {
        //           title: title,
        //           url: options.url,
        //           otherkey: othervalue
        //         };
        //window.history.pushState(state, document.title, url);

      //   如何响应浏览器的前进、后退操作
      //   window对象上提供了onpopstate事件，上面传递的state对象会成为event的子对象，这样就可以拿到存储的title和URL了
      //   window.addEventListener('popstate', function(e){
      //   if (history.state){
      //   var state = e.state;
      //     //do something(state.url, state.title);
      //   }
      // }, false);
      // 这样就可以结合ajax和pushState完美的进行无刷新浏览了。
      // 一些限制
      // 1、无法跨域，这个是必然的。引用曾经在网上看到的一句经典的话：“如果javascript可以跨域的话，那他就可以逆天了！”
      // 2、state对象虽然可以存储很多自定义的属性，但值不能是个对象

    //   对应后端的一些处理
    // 这种模式下除了当前使用ajax可以无刷新浏览外，还要保证直接请求改变的URL后也可以正常浏览，所以后端要对这些处理下。
    // 1、对结合pushState的ajax可以发送一个特殊的头，如： setRequestHeader(‘PJAX’, ‘true’)。
    // 2、后端获取到有PJAX=true的header时，将页面中通用的部分都不输出。比如：PHP可以通过下面的判断
    // 虽然接口上只有pushState、replaceState、onpopstate，但在使用的时候还是要做很多处理的
    // function is_pjax(){
	  // return array_key_exists('HTTP_X_PJAX', $_SERVER) && $_SERVER['HTTP_X_PJAX'] === 'true';
    // }
        window.history.pushState({}, 0, url);
      }
    },
    backChina() {
      this.currentLevel = 1;
      this.initChina();
    },
    backProvince() {
      this.currentLevel = 2;
      this.initProvince();
    },
    initChina() {
      let json = require("@/assets/json/map2/china.json");
      this.chinaJson = json;
      this.initMap(json, "中国");
    },

    //点击 新疆维吾尔自治区
    initProvince(params) {
      if (params) {
        let feature = this.getProvinceId(params.name);//
        let { id, name } = feature[0].properties;//feature[0]是一个对象  properties是属性
        this.provinceObj = { id, name };

        //console.log("params.name "+params.name );//params.name 新疆维吾尔自治区
      }
      let json = require("@/assets/json/map2/province/" +
        this.provinceObj.id +
        ".json");
      this.provinceJson = json;
      this.currentLevel = 2;

      //params.name 湖南省
      // home.vue?3be5:1169 this.provinceObj.name 湖南省
      // console.log("this.provinceObj.name "+this.provinceObj.name );//
      this.initMap(json, this.provinceObj.name);
    },
    initCity(params) {
      if (params) {
        let feature = this.getCityId(params.name);
        let { id, name } = feature[0].properties;
        this.cityObj = { id, name };
      }
      let json = require("@/assets/json/map2/couties/" +
        this.cityObj.id +
        "00" +
        ".json");
      this.cityJson = json;
      // this.cityJson.features.map((item) => {
      //   // item.geometry.coordinates.reduce()
      // });
      this.currentLevel = 3;
      this.initMap(json, this.city.name);
    },


    // // 图表 oroptionmapjsonr是一个div
		// 	echarts() {
		// 		this.$echarts.registerMap('china', chinaJson);
		// 		var oroptionmapjsonr_charts = this.$echarts.init(this.$refs.oroptionmapjsonr);
		// 		oroptionmapjsonr_charts.setOption(this.oroptionmapjsonr)
		// 	}

    //渲染地图   看到这里  https://echarts.apache.org/zh/option.html#geo.scaleLimit.min
    initMap(json, areaName) {
      this.$echarts.registerMap(areaName, json);
      //map存放的是  div元素
      this.map.setOption({
        //测试没看到起什么作用
        tooltip: {
          //提示框组件。
          trigger: "item", //触发类型 散点图
          enterable: true, //鼠标是否可进入提示框
          transitionDuration: 1, //提示框移动动画过渡时间
          triggerOn: "click",
           //测试没看到起什么作用
          formatter: (params) => {
            //标记点事件
            console.log(JSON.stringify(params ));
            this.initbar(params.data);
          },
          backgroundColor: "transparents",//rgb(241, 6, 6)  测试没看到起什么作用
          borderColor: "#4dd3e8",//测试没看到起什么作用
          textStyle: {
            color: "#ccf2ff",//测试没看到起什么作用
          },
          padding: 22,//测试没看到起什么作用
        },
        geo: {
          type: "map",
          map: areaName,//这个关联  this.$echarts.registerMap(areaName, json);中的
          roam: true,//  是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
          zoom: 1.5,//当前视角的缩放比例。
          center: json.cp ? [json.cp[0], json.cp[1]] : [105.5525, 34.3227],  //当前视角的中心点，用经纬度表示
          selectedMode: "single", //选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选'single'表示单选，或者'multiple'表示多选
          aspectScale: 0.75,//这个参数用于 scale 地图的长宽比。最终的 aspect 的计算方式是：geoBoundingRect.width / geoBoundingRect.height * aspectScale
          itemStyle: {
            normal: {
              borderColor: "rgb(147, 235, 248)",
              borderWidth: 1,//省边界的线
              //中国地图的颜色  地图区域的颜色。
              areaColor: {
                // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
                  // type: 'linear',
                type: "radial",//// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "#09132c", // 一个省0% 处的颜色  
                  },
                  {
                    offset: 1,
                    color: "#274d68", // 一个省100% 处的颜色
                  },
                ],
                globalCoord: true, // 缺省为 false
              },
            },
             //鼠标进入样式 
            emphasis: {
              areaColor: "rgb(241, 6, 6)",//rgb(241, 6, 6)  rgb(46,229,206)
              borderWidth: 0.1,
            },
          },
          //省名字的样式
          label: {//
            normal: {
              show: true,//显示
              textStyle: {
                color: "#1DE9B6",
              },
            },
            //鼠标进入  省名字的样式
            emphasis: {
              textStyle: {
                color: "rgb(183,185,14)",//rgb(183,185,14)
              },
            },
          },
          //测试没看到起什么作用  高亮状态下的多边形和标签样式
          emphasis: {
            //'self' 只聚焦（不淡出）当前高亮的数据的图形。
            //focus: 'self'
            itemStyle: {
              areaColor: "#092442",
              borderColor: "#000",
            },
            label: {//是否显示标签。
              show: true,
              color: "#fff",
            },
          },
        },
        //  测试没看到起什么的，可能是5.0的
        series: [
          //标记点数据
          {
            //// 涟漪效果
            //vue-cli使用echarts系列之涟漪效果地图effectScatter
            type: "effectScatter",//去掉后地图不显示
            //从 v5.0.0 开始支持
            // //在高亮图形时，是否淡出其它数据的图形已达到聚焦的效果。支持如下配置：
            coordinateSystem: "geo",//去掉后地图不显示   // 该系列使用的坐标系
            //测试没看到起什么
             showEffectOn: "render",  // 配置何时显示特效
            //测试没看到起什么
            rippleEffect: {
              period: 15,
              scale: 4,
              brushType: "fill",
            },
            hoverAnimation: true,
            //测试没看到起什么
            itemStyle: {
              normal: {
                color: "#ffff",
                shadowBlur: 10,
                shadowColor: "#333",
              },
            },
            data: this.markPointData, //标记点数组  //测试没看到起什么作用
          },
        ],
      });
      // 解绑click事件
      this.map.off("click");
      //给地图添加监听事件
      this.map.on("click", (params) => {
        if (this.currentLevel == 1) {
          //当前是中国
          this.initProvince(params);
        }
        if (this.currentLevel == 2) {
          //当前是省级
          return;
          this.initCity(params);
        }
        if (this.currentLevel == 3) {
          //当前是市级，不再下钻地图
          return;
        }
      });
    },

    getProvinceId(name) {
      let features = this.chinaJson.features;
      let feature = features.filter((v) => v.properties.name == name);
      return feature;
    },
    getCityId(name) {
      let features = this.provinceJson.features;
      let feature = features.filter((v) => v.properties.name == name);
      return feature;
    },

    //初始化地图
    initMapAndData() {
      this.map = this.$echarts.init(document.getElementById("charts"));
      let params = {
        provinceCode: this.value1,
        cityCode: this.value2,
        districtCode: this.value3,
      };
      this.$http.post("/home/devices", params).then((res) => {
        if (res.data.h.code == 0) {
          let re = [];
          // res.data.b.map((item) => {
          //   let { position, siteName, siteNo, address } = item;
          //   if (position) {
          //     let obj = {
          //       value: [],
          //       itemStyle: { color: "#4ab2e5" },
          //       name: "",
          //       code: "",
          //       address: "",
          //     };
          //     obj.name = siteName;
          //     obj.code = siteNo;
          //     obj.address = address;
          //     obj.value.push(position.split(",")[0]);
          //     obj.value.push(position.split(",")[1]);
          //     let color = item.isOnline == "true" ? "#04BA19" : "#4ab2e5";
          //     obj.itemStyle.color = color;
          //     re.push(obj);
          //   }
          // });
          
          this.markPointData = re;
          this.initChina();
        }
      });
    },
    initInfo() {
      this.barShow = true;
      this.$chart5 = this.$echarts.init(document.querySelector(".bar-chart"));
      this.$chart5.setOption(this.option5);
      this.$chart5.setOption({
        xAxis: {
          data: this.timelist,
        },
        series: [
          {
            data: this.onelist,
          },
          {
            data: this.twolist,
          },
          {
            data: this.threelist,
          },
        ],
      });
    },
    closeBar() {
      this.barShow = false;
    },
  },
  created() {
    // this.getarea();
  },
  mounted() {
    this.initbox();
    this.initcake();
    this.initMapAndData(); 
    this.sub();
    this.getwarn();

    this.bindChat();
    var erd = elementResizeDetectorMaker();
    erd.listenTo(
      document.getElementById("indexarea"),
      function (element) {
        this.$nextTick(function () {
          //使echarts尺寸重置
           this.$echarts.init(document.getElementById("indexarea")).resize();
        });
      }.bind(this)
    );
    erd.listenTo(
      document.getElementById("indexstatus"),
      function (element) {
        this.$nextTick(function () {
          //使echarts尺寸重置
          this.$echarts.init(document.getElementById("indexstatus")).resize();
        });
      }.bind(this)
    );
    erd.listenTo(
      document.getElementById("indexinline"),
      function (element) {
        this.$nextTick(function () {
          //使echarts尺寸重置
          this.$echarts.init(document.getElementById("indexinline")).resize();
        });
      }.bind(this)
    );
    erd.listenTo(
      document.getElementById("charts"),
      function (element) {
        this.$nextTick(function () {
          //使echarts尺寸重置
          this.$echarts.init(document.getElementById("charts")).resize();
        });
      }.bind(this)
    );
  },
};
</script>


<style scoped>
.center {
  position: relative;
}
.search {
  padding-left: 20px;
  box-sizing: border-box;
  display: inline-block;
}
/*
 子组件中已经写了 
 .search .el-select {
  float: left;
  width: 120px;
  margin-right: 10px;
} 
.search /deep/ .el-input--suffix .el-input__inner {
  background-color: transparent !important;
}
.search /deep/.el-input__icon {
  line-height: 30px;
} */
.cake_chart 
{
   /* height: 400px; */
   /* padding-top: 5px; */
}
.main 
{
  /* height: 400px; */
  /* padding-top: 5px; */
}

.first_box,
.second_box,
.third_box {
  display: inline-block;
  float: left;
  width: 32%;
  margin-right: 1%;
  height: 50vh;
}
.first_cake,
.second_cake,
.third_cake {
  height: 100%;
  width: 100%;
  padding-top: 20px;
  box-sizing: border-box;
}
.map-container {
  background-color: transparent !important;
  box-sizing: border-box;
  width: 50%;
  height: 62vh; 
  position: relative;
  display: inline-block;
  float: left;
  z-index: 5;
}


.table {
  position: relative;
  width: 50%;
  height: 100%;
  height: 62vh;
  display: inline-block;
  float: right;
}
.el-table {
  background: transparent;
}
.el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}
.el-table /deep/ .cell {
  text-align: center;
  color: #fff;
}
.animation {
  animation: blink 2s linear infinite;
  -webkit-animation: blink 2s linear infinite;
  -moz-animation: blink 2s linear infinite;
  -ms-animation: blink 2s linear infinite;
  -o-animation: blink 2s linear infinite;
  color: #fe6619 !important;
}
@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0.8;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0.8;
  }
}
@-moz-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0.8;
  }
}
@-ms-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0.8;
  }
}
/* 定义keyframe动画，命名为blink */
/* 使用CSS的keyframes控制预警文字的闪烁 */
@-o-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0.8;
  }
}
/* 
.el-table tr {
  background-color: none;
}
.el-table /deep/ .el-table__body {
  width: 100% !important;
}
.el-table /deep/ .cell img {
  cursor: pointer;
  height: 22px;
  width: 23px;
  margin-right: 5px;
  display: inline-block;
} */



.asile-echart {
  position: absolute;
  padding: 0 20px 20px 0;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}
.title {
  position: absolute;
  color: #ccf2ff;
  z-index: 1000;
  padding-top: 20px;
  padding-left: 20px;
  box-sizing: border-box;
}
.active {
  cursor: pointer;
}


.bar {
  background: #071b3d;
  position: absolute;
  right: 20px;
  top: 40px;
  height: 230px;
  width: 400px;
}
.bar .bar-title {
  position: relative;
  color: #fff;
  font-size: 16px;
  height: 30px;
  line-height: 30px;
  background: linear-gradient(90deg, #3053af, #021132) !important;
}
.bar .bar-title p {
  display: inline-block;
}
.bar .bar-title p:nth-of-type(1) {
  margin-left: 10px;
  margin-right: 20px;
}
.bar .bar-title p:nth-of-type(2) {
  margin-right: 20px;
  font-weight: 600;
}
.bar .bar-title p:nth-of-type(3) {
  font-weight: 600;
}
.bar .bar-title img {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);

  cursor: pointer;
}
.bar-chart {
  height: 200px;
  width: 400px;
}
.bar-chart > div {
  height: 100% !important;
  width: 100% !important;
}
.bar-chart > div > canvas {
  height: 50% !important;
  width: 50% !important;
}
</style>
<style>
.customer-table th {
  border: none!important;
}
.customer-table td,
.customer-table th.is-leaf {
  border: none !important;
}
</style>